<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小球围绕大球旋转(ballRotate)</title>
  <style>
    .root {
      margin: 0 auto;
      border-radius: 50%;
      border: 1px solid #ccc;
      position: relative;
    }
    .root1{
      width: 300px;
      height: 300px;
      margin-top: 50px;
    }
    .root2{
      width: 400px;
      height: 400px;
      margin-top: 50px;
    }
    .root3{
      width: 500px;
      height: 500px;
      margin-top: 100px;
    }
    .ball {
      position: absolute;
      top: 50%;
      border-radius: 50%;
      will-change: top,right;
    }
    .ball1{
      right: -10px;
      top: 50%;
      background-color: rgb(189, 24, 71);
      width: 20px;
      height: 20px;
    }
    .ball2{
      /* top: -20px;
      right: calc(50% - 20px); */
      right: -20px;
      background-color: rgb(91, 236, 192);
      width: 40px;
      height: 40px;
    }
    .ball3{
      /* top: calc(50% - 30px);
      right: calc(100% - 30px); */
      right: -30px;
      background-color: rgb(14, 14, 180);
      width: 60px;
      height: 60px;
    }
    .control {
      margin: 0 auto;
      width: 300px;
    }
  </style>
</head>
<body>
  
  
  <div class="root root3" id="root3">
    <div class="ball ball3" id="ball3"></div>
    <div class="root root2" id="root2">
      <div class="ball ball2" id="ball2"></div>
      <div class="root root1" id="root1">
        <div class="ball ball1" id="ball1"></div>
      </div>
    </div>
  </div>
  <div class="control">
    <button id="start">开始</button>
    <button id="end">停止</button>
  </div>

  <script src="../Utils//requestAnimationFrame.js"></script>
  <script>
    const start = document.querySelector('#start');
    const end = document.querySelector('#end');
    const ball1 = document.querySelector('#ball1');
    const ball2 = document.querySelector('#ball2');
    const ball3 = document.querySelector('#ball3');
    let top1 = '', right1 = '', setAngle = 0;
    let bigR = {
      r1: 150,
      r2: 200,
      r3: 250
    }
    let minR = {
      r1: 10,
      r2: 20,
      r3: 30
    }
    let timer
    let status = ''
    function setPosition (size) {
      switch (size) {
        case 1:
          run1()
          break;
        case 2:
          run2()
          break;
        case 3:
          run3()
          break;
      }
        
    }
    function run1() {
      let size = minR.r1*2 + 'px'
      let x = bigR.r1 * ( 1 - Math.cos(setAngle * Math.PI/180)) - minR.r1
      let y = bigR.r1 * ( 1 - Math.sin(setAngle * Math.PI/180))  - minR.r1
      ball1.style.right = x + 'px'
      ball1.style.top = y + 'px'
    }
    function run2() {
      let size = minR.r2*2 + 'px'
      let x = bigR.r2 * ( 1 - Math.cos(setAngle * Math.PI/180)) - minR.r2
      let y = bigR.r2 * ( 1 - Math.sin(setAngle * Math.PI/180))  - minR.r2
      ball2.style.right = x + 'px'
      ball2.style.top = y + 'px'
    }
    function run3() {
      let size = minR.r3*2 + 'px'
      let x = bigR.r3 * ( 1 - Math.cos(setAngle * Math.PI/180)) - minR.r3
      let y = bigR.r3 * ( 1 - Math.sin(setAngle * Math.PI/180))  - minR.r3
      ball3.style.right = x + 'px'
      ball3.style.top = y + 'px'
    }
    function toMove () {
      setAngle += 1
      timer = window.requestAnimationFrame(toMove)
      setPosition(1)
      setPosition(2)
      setPosition(3)
    }
    start.onclick = () => {
      toMove()
      start.textContent = '加速'
    }
    end.onclick = () => {
      window.cancelAnimationFrame(timer)
      timer = null
      start.textContent = '开始'
    }
  </script>
</body>
</html>